<template>
  <h1 :style="{ color: title.color }">{{ title.val }}</h1>
  <span>我的组件1</span>
  <p>num = {{ num }} <button @click="handleAdd">增加</button></p>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item }}</li>
  </ul>
  <p>我的计算属性：{{ myComputed }}</p>
</template>

<script lang="ts" setup>
import { computed, PropType, ref, defineProps } from "vue";
import { IProduct, titleInfo } from "@/types";
defineProps({
  title: {
    type: Object as PropType<titleInfo>,
    require: true,
  },
});

let num = ref(1);
const list = ref([] as IProduct[]);

const handleAdd = (): void => {
  list.value.push({
    id: num.value++,
    name: "张三" + num.value,
    price: +Math.random().toFixed(2) * 100,
  });
};

const myComputed = computed(() => {
  return num.value * 10;
});
</script>

<style>
</style>